<template>
  <div class="map-wrapper">
    <Loading v-if="isLoading" />
    <div ref="container" class="map-container"></div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Loading from '@/components/Loading.vue'
import Map from '@/utils/map'
export default Vue.extend({
  components: { Loading },
  data() {
    return {
      isLoading: false,
      map: null,
    }
  },
  head: {
    title: '',
  },
  async mounted() {
    if (!process.browser) return
    this.isLoading = true
    this.map = Map.getMap(Map.type.AMAP).getInstance({ container: this.$refs.container })
    // Promise完成表示地图加载完成
    await this.map.getRelMapPromise()
    // 绘制数据
    this.isLoading = false
  },

  beforeDestroy() {
    this.map?.destroy()
  },
})
</script>
<style lang="scss" scoped>
.map-wrapper {
  height: 100%;
  position: relative;
  .map-container {
    height: 100%;
  }

  ::v-deep.ant-spin {
    max-height: 100%;
  }

  ::v-deep.ant-spin-text {
    text-shadow: none !important;
  }
}
</style>
